<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>房贷计算器</title>
    <script>
        function jisuanfangshiChange(v) {
            // alert(v)
            if (v === "2") {
                document.querySelector("#jiusanfangshi1").style.display = "block";
                document.querySelector("#jisuanfangshi2").style.display = "none";
            } else {
                document.querySelector("#jiusanfangshi1").style.display = "none";
                document.querySelector("#jisuanfangshi2").style.display = "block";
            }
        }

        function jisuan() {//获取房屋总价
            let fangwuzongjia = document.querySelector("#fangwuzongjia").value
            console.log("获取房屋总价:", fangwuzongjia)//获取按揭成数
            document.querySelector("#fkze").value = fangwuzongjia
            let anjiechengshu = document.querySelector("#anjiechengshu").value
            let shoufukuan = fangwuzongjia * (1 - parseFloat(anjiechengshu)) * 10000;
            console.log("首付款:", shoufukuan)
            document.querySelector("#sfk").value = shoufukuan
            let daikuanzonge = fangwuzongjia * parseFloat(anjiechengshu) * 10000;
            console.log("贷款总额:", daikuanzonge)//支付利息
            document.querySelector("#dkze").value = daikuanzonge
            //每月还款额 = 贷款本金 x[月利率 x(1 + 月利率)^还款月数]÷[(1 +月利率)^还款月数 - 1]。
            //获取月利率 获取商贷利率
            let yuelilv = parseFloat(document.querySelector("#shangdaililv").value) / 100 / 12
            //月利率保留4位小数
            yuelilv = parseFloat(yuelilv.toFixed(4))
            console.log("月利率:", yuelilv)
            //获取按揭年数
            let daikuanyears = parseInt(document.querySelector("#daikuanyears").value)
            console.log("按揭年数:", daikuanyears)
            let huankuanyueshu = daikuanyears * 12
            console.log("还款月数:", huankuanyueshu)
            document.querySelector("#hkze").value =  huankuanyueshu
            //每月还款额 = 贷款本金 x[月利率 x(1 + 月利率)^还款月数]÷「(1 + 月利率)^还款月数 - 1]。
            //2的平方
            // let a= 1+yuelilv;
            // console.log("a",a)
            let shenmi = Math.pow(1 + yuelilv, huankuanyueshu); S
            
            console.log("是2.71吗?", shenmi)
            let meiyuehuankuan = daikuanzonge * yuelilv * shenmi / (shenmi - 1);
            console.log("每月还款额:", meiyuehuankuan)
            //还款总额
            console.log("还款总额", meiyuehuankuan * huankuanyueshu)
            document.querySelector("#hkze").value=(meiyuehuankuan*huankuanyueshu).toFixed(2)
            document.querySelector("#zflx").value=(meiyuehuankuan*huankuanyueshu-daikuanzonge).toFixed(2)
        }
    </script>

</head>

<body>
    <h1>房贷公积金贷款商贷组合贷款计算器</h1>
    <h2>房贷信息</h2>
    <p>贷款类别：
        <select id="daikuanleixing">
            <option value="1">商贷</option>
            <option value="2">公积金贷款</option>
            <option value="3">组合贷款</option>
        </select>
    </p>
    <p>
        还款方式：
        <select id="huankuanfangshi">
            <option value="1">等额本息</option>
            <option value="2">等额本金</option>
        </select>
    </p>


    <p>
        计算方式：<select id="jisuanfangshi" onchange="jisuanfangshiChange(this.value)">
            <option value="1">根据按揭成数计算</option>
            <option value="2">根据贷款总额计算</option>
        </select>
    </p>
    <p id="jiusanfangshi1" style="display: none;">
        贷款总额：<input type="text" id="daikuanzonge" placeholder="请输入贷款总额"> 万元
    </p>
    <p id="jisuanfangshi2" style="display: block;">
        房屋总价：<input type="text" id="fangwuzongjia" placeholder="请输入房屋总价"> 万元
        <br>
        <br>
        按揭成数：<select id="anjiechengshu">
            <option value="0.9">9成</option>
            <option value="0.8">8成</option>
            <option value="0.7" selected>7成</option>
            <option value="0.6">6成</option>
            <option value="0.5">5成</option>
            <option value="0.4">4成</option>
            <option value="0.3">3成</option>
            <option value="0.2">2成</option>
        </select>
    </p>


    <p>
        按揭年数：<select id="daikuanyears">
        </select>
    </p>
    <p>
        商贷利率：<input type="text" id="shangdaililv" placeholder="请输入商贷利率"> %
    </p>
    <P><button onclick="jisuan()">房贷计算</button></P>
    <script>
        let daikuanyears = document.querySelector("#daikuanyears")
        for (let i = 1; i <= 30; i++) {
            //创建option对象
            let option = document.createElement("option")
            //设置option的value和text
            option.value = i
            option.text = i + "年(" + (i * 12) + "期)"
            //添加到select中
            daikuanyears.appendChild(option)
        }
    </script>
    <div>
        房款总额：<input type="text" name="" id="fkze">
        首付款：<input type="text" name="" id="sfk">
        贷款总额：<input type="text" name="" id="dkze">
        还款总额：<input type="text" name="" id="hkze">
        支付利息：<input type="text" name="" id="zflx">
        月还款额：<input type="text" name="" id="dkyueshu">
        月均金额：<input type="text" name="" id="yuejunhuankuan">
    </div>
</body>

</html>